<%@ page pageEncoding="utf-8" import="java.util.*" %>
<%@ page import="com.listener.pojo.Pokemon" %>
<%@ page import="com.listener.pojo.Page" %>
<html>
<head>
    <jsp:include page="head.jsp">
        <jsp:param name="title" value="宝可梦列表"/>
    </jsp:include>
</head>
<body class="pageTable">

<jsp:include page="/web/nav.jsp">
    <jsp:param name="fun" value="pokemon"/>
</jsp:include>
<%
    Map<String,String> typeColors= (Map<String, String>) session.getAttribute("typeColors");
    Pokemon pokemonCondition= (Pokemon) request.getSession().getAttribute("pokemonCondition");
    Page<Pokemon> pages= (Page<Pokemon>) request.getAttribute("pokemonPage");
    List<Pokemon> pokemonList=pages.getPage();
%>
<div class="row">
    <div class="col-md-2">
        <button onclick="goBack()"  class="backButton" >返回</button></div>
    <div class="col-md-8">
        <div class="pageSearch">
                <form action="<%=request.getContextPath()%>/selectPokemonPage" method="post" >
                    宝可梦名称：<input type="text" name="pokemon" value="<%=(pokemonCondition!=null && pokemonCondition.getPokemon()!=null)?pokemonCondition.getPokemon():""%>">&nbsp&nbsp&nbsp&nbsp
                    特性：<input type="text" name="ability" value="<%=(pokemonCondition!=null && pokemonCondition.getAbility()!=null)?pokemonCondition.getAbility():""%>">&nbsp&nbsp&nbsp&nbsp
                    属性：
                    <select class="typeSelect" name="type">
                        <option value="" style="color: black">
                            不限
                        </option>
                        <%
                            List<Map<String,Object>> types=(List<Map<String,Object>>)
                                    request.getSession().getAttribute("types");
                            for (Map<String, Object> type : types) {
                        %>
                        <option value="<%=type.get("type")%>" style="
                        background-color: <%=typeColors.get(type.get("type"))%>"
                                <%=((pokemonCondition!=null)&&
                                        (type.get("type").equals(pokemonCondition.getType())))?"selected":""%>>
                            <%=type.get("type")%>
                        </option>
                        <%
                            }
                        %>
                    </select>&nbsp&nbsp&nbsp&nbsp
                    <select class="typeSelect" name="type1">
                        <option value="" style="color: black">
                        不限
                    </option>
                    <%
                        for (Map<String, Object> type : types) {
                    %>
                    <option value="<%=type.get("type")%>" style="
                        background-color: <%=typeColors.get(type.get("type"))%>"
                            <%=((pokemonCondition!=null)&&
                                    (type.get("type").equals(pokemonCondition.getType1())))?"selected":""%>>
                        <%=type.get("type")%>
                    </option>
                    <%
                        }
                    %>
                </select>&nbsp&nbsp&nbsp&nbsp
                    <input class="btn btn-default" type="submit" value="查询">
                </form>
        </div>
        <table border="2px black" style="width: 100%;">
            <tr class="pokemonTh">
                <th>宝可梦编号</th>
                <th>宝可梦图片</th>
                <th>宝可梦名称</th>
                <th>属性</th>
                <th>特性</th>
                <th>详情页</th>
            </tr>
            <%
                if(pokemonList!=null && pokemonList.size()>0)
                {
                for(Pokemon pokemon : pokemonList){
            %>
            <tr class="pokemonTr">
                <td><%=pokemon.getPokemonId()%></td>
                <td>
                    <img src="<%=request.getContextPath()%>/<%=pokemon.getPicture()%>"
                         alt="<%=pokemon.getPokemon()%>"
                         height="35">
                </td>
                <td>
                    <%=pokemon.getPokemon()%>
                </td>
                <td>
                    <img src="<%=request.getContextPath()%>/img/type/<%=pokemon.getType()%>.png"
                         height="25">
                    <%
                        if(pokemon.getType1() !=null){
                    %>
                    <img src="<%=request.getContextPath()%>/img/type/<%=pokemon.getType1()%>.png"
                         height="25">
                    <%
                        }
                    %>
                </td>
                <td>
                    <%=pokemon.getAbility()%>
                    <%
                        if(pokemon.getAbility1()!=null){
                    %>
                    &nbsp;或&nbsp;
                    <%=pokemon.getAbility1()%>
                        <%
                            }
                        %>
                    <%
                        if(pokemon.getHiddenAbility()!=null)
                        {
                    %>
                    &nbsp;及&nbsp;
                    <%=pokemon.getHiddenAbility()%>
                    <%
                        }
                    %>
                </td>
                <td>
                    <a href="<%=request.getContextPath()%>/detailsOfPokemonPage?pokemon=<%=pokemon.getPokemon()%>"
                       title="查看关于【<%=pokemon.getPokemon()%>】的更多事情">
                        <%=pokemon.getPokemon()%>-详情页
                    </a>
                </td>
            </tr>
            <%
                }
            %>

            <%
                }
            %>
        </table>
            <form action="<%=request.getContextPath()%>/selectPokemonPage" method="post">
        <ul class="pagination justify-content-center" >
            <li class="page-item <%=(pages.getPageNum()!=1)?"":"disabled"%>"><a class="page-link"
                                     href="<%=request.getContextPath()%>/selectPokemonPage?pageNum=<%=pages.getPageNum()-1%>"
            >上一页</a></li>
            <li class="page-item disabled">
                <a class="page-link" href="#">
                    当前第<%=pages.getPageNum()%>页&nbsp;共<%=pages.getPageSum()%>页</a>
            </li>
            <li class="page-item">
                <p class="page-link">
                    <input  type="submit" value="跳转到" style="background-color: white;border: none">
                    第<input id="pageNumInput" type="text" name="pageNum" style="height: 18px;width: 40px;text-align: center" value="<%=pages.getPageNum()%>">页</p>
            </li>
            <li class="page-item <%=(pages.getPageNum()!=pages.getPageSum())?"":"disabled"%>"><a class="page-link"
                                     href="<%=request.getContextPath()%>/selectPokemonPage?pageNum=<%=pages.getPageNum()+1%>"
            >下一页</a></li>
        </ul>
            </form>
    </div>
    <div class="col-md-2"></div>
    <script>
        function goBack() {
            window.history.back();
        }
        $().ready(function(){
           $("#pageNumInput").blur(function(){
               if(!Number.isInteger(+$(this).val()))
               {
                   $(this).val(<%=pages.getPageNum()%>);
               }else{
                   let number=+$(this).val();
                   if(number<1 || number><%=pages.getPageSum()%>){
                       $(this).val(<%=pages.getPageNum()%>);
                   }
               }
           })
        });
    </script>
</div>
</body>
</html>
